import React from 'react';
import './ErrorMessage.css';

const ErrorMessage = ({ error, onRetry, cityName }) => {
  if (!error) return null;

  // 根据错误类型显示不同的图标和建议
  const getErrorInfo = (errorMessage) => {
    const message = errorMessage.toLowerCase();
    
    if (message.includes('网络') || message.includes('network')) {
      return {
        icon: '🌐',
        title: '网络连接错误',
        suggestion: '请检查您的网络连接后重试'
      };
    }
    
    if (message.includes('城市') || message.includes('city') || message.includes('找不到')) {
      return {
        icon: '🏙️',
        title: '城市未找到',
        suggestion: '请检查城市名称拼写是否正确'
      };
    }
    
    if (message.includes('超时') || message.includes('timeout')) {
      return {
        icon: '⏰',
        title: '请求超时',
        suggestion: '服务器响应较慢，请稍后重试'
      };
    }
    
    if (message.includes('api') || message.includes('key')) {
      return {
        icon: '🔑',
        title: 'API服务错误',
        suggestion: '天气服务暂时不可用，正在使用演示数据'
      };
    }
    
    return {
      icon: '❌',
      title: '获取天气信息失败',
      suggestion: '请稍后重试或尝试其他城市'
    };
  };

  const errorInfo = getErrorInfo(error);

  return (
    <div className="error-message">
      <div className="error-content">
        <div className="error-icon">{errorInfo.icon}</div>
        <div className="error-details">
          <h3 className="error-title">{errorInfo.title}</h3>
          {cityName && (
            <p className="error-city">查询城市: {cityName}</p>
          )}
          <p className="error-description">{error}</p>
          <p className="error-suggestion">{errorInfo.suggestion}</p>
        </div>
      </div>
      
      <div className="error-actions">
        {onRetry && (
          <button 
            className="retry-button"
            onClick={onRetry}
          >
            <span className="retry-icon">🔄</span>
            重试
          </button>
        )}
        
        <div className="error-tips">
          <h4>💡 搜索建议：</h4>
          <ul>
            <li>使用中文城市名称（如：北京、上海）</li>
            <li>检查城市名称拼写是否正确</li>
            <li>尝试使用完整的城市名称</li>
            <li>确保网络连接正常</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default ErrorMessage;